<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import { getUserinfoApi } from '@/api/user'

export default {
  name: 'Dashboard',
  async created() {
    // 在这里调用actions发起用户个人资料接口，就晚了
    // 分析
    // 1、左侧菜单、名字、头像都是根据接口返回的数据来进行渲染的
    // 2、跳转进首页再请求接口，明显不合适
    // 3、如果跳转进首页再请求接口，首页会有几秒钟的空白页面（接口还没返回数据）
    // 解决：
    // 1、提前请求获取用户基本资料接口
    // 2、登录完之后请求太早
    // 3、所以在有了token之后，首页跳转之前，发起请求用户基本资料接口。
    // this.getuserInfo()
  },
  methods: {
    // ...mapActions('user', ['getuserInfo'])
  },
  computed: {
    ...mapGetters(['name'])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
